<template>
  <div class="distribution-bind-set gray-box top-redius border-bottom-gray">
    <div class="title">{{$t('distribution.bindSet')}}</div>
    <el-form
      ref="dataForm"
      :label-width="this.$i18n.t('language') === 'language' ? '200px' : '100px'"
      size="mini"
      class="set-form"
      label-position="left"
      :model="dataForm"
    >
      <el-form-item :label="$t('distribution.performanceAttribution')">
        <el-radio-group v-model="dataForm.attribution">
          <el-radio :label="0">{{$t('distribution.paTip1')}}</el-radio>
          <el-radio :label="1">{{$t('distribution.paTip2')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('distribution.bindingScene')" v-if="dataForm.attribution === 0">
        <!-- <el-checkbox v-model="dataForm.bindScene.follow">关注公众号</el-checkbox> -->
        <el-checkbox v-model="dataForm.bindScene.buy" disabled>{{$t('distribution.placeOrder')}}</el-checkbox>
        <!-- <el-checkbox v-model="dataForm.bindScene.sweepCode">扫码直接绑定</el-checkbox> -->
        <span class="tips">{{$t('distribution.poTip1')}}</span>
      </el-form-item>

      <el-form-item :label="$t('distribution.grabCustomers')" v-if="dataForm.attribution === 0">
        <el-checkbox v-model="dataForm.rob.buy">{{$t('distribution.placeOrder')}}</el-checkbox>
        <!-- <el-checkbox v-model="dataForm.rob.sweepCode">扫码</el-checkbox> -->
        <span class="tips">{{$t('distribution.poTip2')}}</span>
      </el-form-item>
<!--      <el-form-item-->
<!--        :label="$t('distribution.bindingTime')"-->
<!--        class="input-group"-->
<!--        v-if="dataForm.attribution === 0"-->
<!--      >-->
<!--        <el-radio-group v-model="isBindDay" @change="removeBindDay()">-->
<!--          <el-radio :label="false">{{$t('distribution.permanentBinding')}}</el-radio>-->
<!--          <el-radio :label="true">{{$t('distribution.limitBind')}}</el-radio>-->
<!--        </el-radio-group>-->

<!--        <el-input-->
<!--          v-model.number="dataForm.bindDay"-->
<!--          style="width:240px"-->
<!--          v-bind:disabled="!isBindDay"-->
<!--        >-->
<!--          <template slot="append">{{$t('coupon.day')}}</template>-->
<!--        </el-input>-->
<!--      </el-form-item>-->

      <el-form-item
        class="input-group"
        v-if="dataForm.attribution === 0"
      >
        <template  slot="label">
          {{$t('distribution.guardTime')}}
        </template>
        <el-tooltip class="item" effect="light" placement="top" style="margin-left:-40px;margin-right:20px">
          <div slot="content">{{$t('distribution.guardTimeTip')}}</div>
          <span>
            <i class="el-icon-question"></i>
          </span>
        </el-tooltip>
        <el-radio-group v-model="isProtectDay" @change="removeProtectDay()">
          >
          <el-radio :label="false">{{$t('distribution.permanentProtection')}}</el-radio>
          <el-radio :label="true">{{$t('distribution.timeLimitedProtection')}}</el-radio>
        </el-radio-group>

        <el-input
          v-model.number="dataForm.protectDay"
          style="width:240px"
          v-bind:disabled="!isProtectDay"
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        >
          <template slot="append">{{$t('coupon.day')}}</template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-button @click="dataFormSubmit()">{{$t('distribution.save')}}</el-button>
  </div>
</template>

<script>
export default {
  components: {

  },
  created () {
    this.getData()
  },
  methods: {
    // 获取数据
    getData () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/platform/distributionBindSet/info'),
        method: 'get'
      }).then(({ data }) => {
        if (data) {
          this.setDate(data)
        }
        this.dataListLoading = false
      })
    },
    // 设置数据
    setDate (data) {
      this.dataForm = data
      if (data.bindDay != null && data.bindDay !== -1) {
        this.isBindDay = true
      } else {
        this.dataForm.bindDay = null
      }
      if (data.protectDay != null && data.protectDay !== -1) {
        this.isProtectDay = true
      } else {
        this.dataForm.protectDay = null
      }
      this.dataForm.bindScene = {
        follow: false,
        buy: true,
        sweepCode: false
      }
    },
    // 提交表单
    dataFormSubmit () {
      // let param
      // if (!this.dataForm.attribution) {
      //   param = {
      //     'bindId': this.dataForm.bindId,
      //     'attribution': this.dataForm.attribution,
      //     'rob': this.dataForm.rob,
      //     'protectDay': this.isProtectDay ? this.dataForm.protectDay : -1,
      //     'bindScene': this.dataForm.bindScene,
      //     'bindDay': this.isBindDay ? this.dataForm.bindDay : -1
      //   }
      // } else {
      //   param = {
      //     'bindId': this.dataForm.bindId,
      //     'attribution': this.dataForm.attribution,
      //     'rob': this.dataForm.rob,
      //     'bindScene': this.dataForm.bindScene
      //   }
      // }
      if (this.isProtectDay && !this.dataForm.protectDay) {
        this.$message.error(this.$i18n.t('publics.noNull') + ',' + 0)
        return
      }
      this.$http({
        url: this.$http.adornUrl(`/platform/distributionBindSet`),
        method: 'put',
        data: this.$http.adornData({
          'bindId': this.dataForm.bindId,
          'attribution': this.dataForm.attribution,
          // attribution 0允许绑定 1不绑定
          // 当用户选择不绑定时，rob和bindScene里面的字段都传false
          'rob': this.dataForm.attribution === 1 ? {
            buy: false,
            sweepCode: false
          } : this.dataForm.rob,
          'bindScene': this.dataForm.attribution === 1 ? {
            follow: false,
            buy: false,
            sweepCode: false
          } : this.dataForm.bindScene,
          // 当用户选择不绑定时，保护时间protectDay和绑定时间bindDay都为0
          'protectDay': this.dataForm.attribution === 1 ? 0 : this.isProtectDay ? this.dataForm.protectDay : -1,
          // 默认永久绑定；不绑定时，bindDay传0（代表不绑定）
          'bindDay': this.dataForm.attribution === 0 ? -1 : 0
        })
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 1500
        })
      }).catch(() => {

      })
    },
    removeProtectDay () {
      this.dataForm.protectDay = null
    },
    removeBindDay () {
      this.dataForm.bindDay = null
    }
  },
  data () {
    return {
      addOrUpdateVisible: false,
      resourcesUrl: window.SITE_CONFIG.resourcesUrl,
      isProtectDay: false,
      isBindDay: false,
      dataForm: {
        'attribution': 1,
        'rob': {
          buy: false,
          sweepCode: false
        },
        'protectDay': 1,
        'bindScene': {
          follow: false,
          buy: false,
          sweepCode: false
        },
        'bindDay': -1
      },
      rules: {

      }
    }
  }
}
</script>
<style lang="scss">
.distribution-bind-set {
  .input-group .el-form-item--mini {
    display: inline-block;
  }
  .el-form-item__content {
    margin-left: 0px !important;
  }
}
</style>
